<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>部门管理列表</title>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css"/>
    <link rel="stylesheet" href="/css/jurisdiction/department-management-list.css"/>
</head>
<body>
    <div class="layui-row deptHea dept-top back ">
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md11">
            <p class="left">部门管理列表</p>
            <div class="right">
                <button class="layui-btn layui-btn-sm" id="Refresh">
                    <i class="layui-icon">&#xe9aa;</i>刷新
                </button>
                <button class="layui-btn layui-btn-sm">
                    <i class="layui-icon">&#xe65c;</i>返回
                </button>
            </div>
        </div>
    </div>

    <div class="layui-row scrBack deptHea">
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md11">
            <div class="screen">
                <i class="layui-icon">&#xe615;</i>筛选查询
            </div>
        </div>
    </div>

    <div class="layui-row  deptHea">
        <div class="layui-col-md11">
            <div class="layui-panel search">
                <form class="layui-form" action="">
                <ul>
                    <li>
                        <div class="layui-form-item">
                            <label class="layui-form-label">部门名称：</label>
                            <div class="layui-input-block">
                                <input type="text" name="deptName"  placeholder="请输入部门名称" autocomplete="off"  class="layui-input">
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="layui-form-item">
                            <label class="layui-form-label">管理员名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="createName"  placeholder="请输入管理员名称" autocomplete="off"  class="layui-input">
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="layui-form-item">
                            <label class="layui-form-label">创建日期</label>
                            <div class="layui-input-block">
                                <input type="text" id="createDate" name="createDate"  placeholder="请选择创建日期" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="layui-form-item">
                            <label class="layui-form-label">状态</label>
                            <div class="layui-input-block">
                                <select name="status" lay-filter="filter" lay-verify="filter">
                                    <option value="">请选择状态</option>
                                    <option value="1">启用</option>
                                    <option value="2">停用</option>
                                </select>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="layui-form-item screenBtn">
                            <a href="javascript:getDept();"  class="layui-btn">
                                <i class="layui-icon">&#xe615;</i>搜索
                            </a>
                            <a href="javascript:resetBox();" class="layui-btn layui-btn-danger">
                                <i class="layui-icon">&#xe669;</i>重置
                            </a>
                        </div>
                    </li>
                </ul>
                </form>
            </div>
        </div>
    </div>

    <div class="layui-row deptHea">
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md11">
            <div class="screen left">
                <i class="layui-icon">&#xe60a;</i>部门数据管理列表
            </div>
            <div class="right">
                <a class="layui-btn" href="javascript:addto();">
                    <i class="layui-icon">&#xe624;</i>添加部门
                </a>
            </div>
        </div>
    </div>

    <div class="layui-row">
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md11" >
            <table id="demo" lay-filter="test"></table>
        </div>
    </div>
</body>
    <script>
        var $;
        var element;
        var form;
        var table;
        var laydate;
        var status;
        var layer;



        layui.use(['jquery','element','form','table','laydate','layer'],function () {
            $ = layui.$;
            element = layui.element;
            form = layui.form;
            table = layui.table;
            laydate = layui.laydate;
            layer = layui.layer;
            laydate.render({
                elem: '#createDate', //指定元素
                type: 'datetime'
            });
            form.on('select(filter)', function(data){
                status = data.value;
            });

            form.on('switch(swi)', function(data){
                var status;
                if(data.elem.checked){
                    status = 1;
                }else{
                    status = 2;
                }
                $.ajax({
                   url:'/Department/updateDeptStatus',
                   data:{
                       "status":status,
                       "id":data.elem.value
                   },
                    dataType:'json',
                    success:function (data) {
                        if(data.data){
                            if(status == 1){
                                layer.msg("已启用");
                            }else{
                                layer.msg("已停用");
                            }
                        }
                    }
                });
            });

            startTab();
            function startTab() {
                $.ajax({
                    url:'/Department/queryDept',
                    dataType:'json',
                    success:function (data) {
                        data = data.data;
                        initTab(data);
                    }
                });
            }

            function initTab(data) {
                table.render({
                    elem: '#demo',
                    data:data,
                    page: true,
                    cols: [[
                        {type:'checkbox',width:'5%'},
                        {title: '序号', type:'numbers',width:'5%'},
                        {field: 'deptName', title: '部门名称',width:'15%',align:'center'},
                        {field: 'deptDescirbe', title: '部门描述',width:'15%',align:'center'},
                        {field: 'trueName', title: '创建人',width:'10%',align:'center'},
                        {field: 'createDate', title: '创建时间',width:'15%',align:'center'},
                        {title: '状态',width:'10%',align:'center',templet:function (d) {
                                if(d.status == 1){
                                    return"<input type='checkbox' value='"+d.id+"' lay-filter='swi' lay-skin='switch' lay-text='启用|停用' checked>";
                                }else{
                                    return"<input type='checkbox' value='"+d.id+"' lay-filter='swi' lay-skin='switch' lay-text='启用|停用'>";
                                }
                            }},
                        {title: '操作',align:'center',width:'16.5%',templet:function (d) {
                                return "<a href='javascript:edit(\""+d.id+"\",\""+d.deptName+"\",\""+d.trueName+"\",\""+d.createDate+"\",\""+d.deptDescirbe+"\");'>编辑</a>     " +
                                    "<a href='javascript:removeDept(\""+d.id+"\",\""+d.deptName+"\");'>删除</a>";
                            }}
                    ]]
                });
            }


            //刷新
            $('#Refresh').click(function () {
                location.reload();
            });

            //重置
            resetBox = function resetBox() {
                $('input[name = deptName]').val('');
                $('input[name = createName]').val('');
                $('input[name = createDate]').val('');
                $('select[name = status]').val('');
                form.render('select');
                startTab();
            };

            //搜索
            getDept = function getDept () {
                $.ajax({
                    url:'/Department/queryDept',
                    data:{
                        "deptName":$('input[name = deptName]').val(),
                        "trueName":$('input[name = createName]').val(),
                        "createDate":$('select[name = createDate]').val(),
                        "status": status
                    },
                    dataType:'json',
                    success:function (data) {
                        data = data.data;
                        initTab(data);
                    }
                })
            };

            //编辑
            edit = function edit(id,deptName,createName,createDate,deptDescirbe) {
                layer.open({
                    type:2,
                    content:'/jurisdiction/department-editor.html',
                    area: ['600px', '400px'],
                    success:function (layero, index) {
                        var iframe = window['layui-layer-iframe'+index];
                        iframe.child(id,deptName,createName,createDate,deptDescirbe);
                    },
                    end:function () {
                        startTab();
                    }
                });
            }
            //添加
            addto = function addto() {
                layer.open({
                    type:2,
                    content:'/jurisdiction/add-department.html',
                    area: ['600px', '400px'],
                    end:function () {
                        startTab();
                    }
                });
            }
            //删除
            removeDept = function removeDept(id, name){
                layer.confirm('是否删除'+name+'?', function(index){
                    $.ajax({
                       url:'/Department/removeDept',
                       data:{'id':id},
                       dataType:'json',
                       success:function (data) {
                           if(data.data){
                               layer.msg("删除成功");
                           }else{
                               layer.msg("删除失败");
                           }
                       }
                    });
                    startTab();
                    layer.close(index);
                });
            }

        });
    </script>
</html>